<template lang="pug">
  el-dialog.intro-dialog(
    title="  ",
    :visible.sync="isShow"
    width="95%"
    top="10%"
    :modal="false"
    :before-close="handleClose")
    .introduction
      .introduction-title {{info.title}}
      .introduction-text {{info.text}}
      //- .introduction-textp(v-else)
      //-   p(
      //-     v-for="(item, index) in info.text"
      //-     :key="index"
      //-     style="font-size:14px;color:#fff;margin-bottom:15px;text-indent:28px;line-height: 28px;letter-spacing: 2px;") {{item}}
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      info: {
        title: '',
        text: '',
        goods: 0,
      }
    }
  },
  mounted() {
    this.$vgo.on('model:intro', (obj) => {
      // console.log(obj)
      this.show()
      this.info = obj
      this.info.goods = 0
    })
  },
  methods: {
    openModal(obj) {
      this.show()
      this.info = obj
    },
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
    },
    handleClose(done) {
      done()
    },
  }
}
</script>

<style lang="stylus" scoped>
.intro-dialog
  >>>.el-dialog
    background-color rgba(0,0,0,0.5) !important
    .el-dialog__headerbtn
      .el-dialog__close
        color #ffffff
        font-size 18px
  .introduction
    color #ffffff
    .introduction-title
      height 40px
      font-size 20px
      letter-spacing 4px
    .introduction-text
      max-height 390px
      overflow-y auto
      letter-spacing 2px
      line-height 28px
      font-size 14px
      white-space break-spaces
    .introduction-textp
      max-height 390px
      overflow-y auto
</style>
